<script setup>
import {useRouter} from 'vue-router';
import ProfessionalInformation from "@/components/User/ProfessionalInformation.vue";
import ScholarshipInformation from "@/components/User/ScholarshipInformation.vue";
import MapInformation from "@/components/User/MapInformation.vue";
import CanteenInformation from "@/components/User/CanteenInformation.vue";
import GrantsInformation from "@/components/User/GrantsInformation.vue";
import LoanInformation from "@/components/User/LoanInformation.vue";
import MapManagement from "@/components/Admin/MapManagement.vue";
import OrganizationManagement from "@/components/Admin/OrganizationManagement.vue";
// 定义组件数组
const components = [{
  path     : 'loan-information',
  name     : 'LoanInformation',
  component: LoanInformation
}, {
  path     : 'grants-information',
  name     : 'GrantsInformation',
  component: GrantsInformation
},
];

// 定义组件数组
const components2 = [
  {
    name     : 'Map Management',
    component: MapManagement,
    size     : 'medium'
  },
  {
    name     : 'Organization Management',
    component: OrganizationManagement,
    size     : 'medium'
  },
];

// 定义组件数组
const components3 = [
  {
    path     : 'professional-information',
    name     : 'ProfessionalInformation',
    component: ProfessionalInformation
  }, {
    path     : 'scholarship-information',
    name     : 'ScholarshipInformation',
    component: ScholarshipInformation
  }, {
    path     : 'map-information',
    name     : 'MapInformation',
    component: MapInformation
  }, {
    path     : 'canteen-information',
    name     : 'CanteenInformation',
    component: CanteenInformation
  },
];

// 路由实例
const router = useRouter();

// 跳转到指定组件
function navigateTo(component) {
  router.push({name: component.replace(/ /g, '')});
}
</script>

<template>
  <div style="display:flex;">
    <div class="card-container">
      <div
          v-for="(card, index) in components"
          :key="index"
          :class="card.size"
          class="card"
          style="width: 450px;;height: 80%"
          @click="navigateTo(card.name)"
      >
        <div class="card-title">{{ card.name }}</div>
        <div class="card-content">
          <p>这是有关{{ card.name }}的内容</p>
        </div>
      </div>
    </div>
    <div class="card-container2">
      <div
          v-for="(card, index) in components2"
          :key="index"
          :class="card.size"
          class="card"
          style="width: 400px;;min-height: 170px"
          @click="navigateTo(card.name)"
      >
        <div class="card-title">{{ card.name }}</div>
        <div class="card-content">
          <p>这是有关{{ card.name }}的内容</p>
        </div>
      </div>
    </div>
  </div>
  <div class="card-container3" style="margin-top: -60px">
    <div
        v-for="(card, index) in components3"
        :key="index"
        :class="card.size"
        class="card"
        style="width: 445px;;height: 42%;"
        @click="navigateTo(card.name)"
    >
      <div class="card-title">{{ card.name }}</div>
      <div class="card-content">
        <p>这是有关{{ card.name }}的内容</p>
      </div>
    </div>
  </div>

</template>

<style scoped>
.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  height: 50vh;
  padding: 16px;
  box-sizing: border-box;
}

.card-container2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 50%;
  padding: 16px;
  box-sizing: border-box;
}

.card-container3 {
  min-width: 1200px;
  display: flex; /* 使用网格布局 */
  gap: 16px; /* 卡片之间的间距 */
  height: 100vh; /* 满屏高 */
  padding: 16px; /* 外边距 */
  box-sizing: border-box; /* 包含内边距和边框在内的宽高 */
}

.card {
  background-color: #fff; /* 背景色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
  padding: 16px; /* 内边距 */
  cursor: pointer; /* 鼠标悬浮效果 */
  transition: transform 0.3s ease; /* 动画效果 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.card:hover {
  transform: scale(1.05); /* 鼠标悬浮时放大效果 */
}

.card-title {
  font-weight: bold;
  margin-bottom: 8px; /* 标题底部间距 */
}

.card-content {
  font-size: 14px; /* 内容字体大小 */
}
</style>
